<template>
  <li class="li_list">
    <label>
        <input type="checkbox"  :checked="todo.done" @click="handleCheck(todo.id)">
        <span>{{todo.name}}</span>
    </label>
    <button @click="delTodo(todo.id)">删除</button>
  </li>
</template>

<script>
export default {
    name:'MyItem',
    props:['todo','changeTodo','del'],
    methods:{
        handleCheck(id){
            this.changeTodo(id)
        },
        delTodo(id){
            // console.log(id);
            if(confirm('确定做完了吗？？')){
                this.del(id)
            }
        }
    }
}
</script>

<style>
    .li_list{
        /* border:0.5px solid ; */
        position: relative;
        list-style: none;
        margin-left:0px;
        margin-top: 2px;
        text-align: left;
    }
    .li_list button {
        background-color: antiquewhite;
        display:none;
        border: 2px;
        /* position: absolute; */
        float: right;
    }
    .li_list:hover{
        background-color: lightgray;
    }
    .li_list:hover button{
        display:block;
    }
</style>